{% extends "base.html" %}

{% block head %}
<style>
    .messages-container {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 使用全视口高度，因为container-fluid已经减去了导航栏高度 */
        padding: 0;
    }
    .split-view {
        display: flex;
        flex: 1;
        overflow: hidden;
        gap: 20px;
        padding: 20px;
        height: 100%; /* 使用100%高度 */
        box-sizing: border-box;
    }
    .listeners-panel {
        width: 300px;
        background-color: #f8f9fa;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
    }
    .listeners-header {
        padding: 20px 15px 15px 15px;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .listeners-title-section {
        flex: 1;
    }
    .listeners-main-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin: 0 0 5px 0;
        color: #333;
    }
    .listeners-subtitle {
        font-size: 0.9rem;
        color: #6c757d;
        margin: 0;
    }
    .listeners-subheader {
        padding: 10px 15px;
        border-bottom: 1px solid #dee2e6;
        background-color: #fff;
    }
    .listeners-list-title {
        font-size: 1.1rem;
        font-weight: bold;
        margin: 0;
        color: #495057;
    }
    .listeners-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
    }
    .listener-item {
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .listener-item:hover {
        background-color: #e9ecef;
    }
    .listener-item.active {
        background-color: #007bff;
        color: white;
    }
    .listener-actions {
        padding: 15px;
        border-top: 1px solid #dee2e6;
    }
    .messages-panel {
        flex: 1;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        height: 100%; /* 使用100%高度 */
        box-sizing: border-box;
    }
    .messages-header {
        padding: 15px;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f9fa;
        border-radius: 10px 10px 0 0;
    }
    .messages-title {
        font-size: 1.1rem;
        font-weight: bold;
        margin: 0;
        color: #495057;
    }
    .messages-list {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 15px;
        height: 100%; /* 使用100%高度而不是min/max-height */
        box-sizing: border-box;
    }
    /* 移除旧的消息样式，使用新的气泡样式 */
    /* 日志抽屉遮罩层 */
    .logs-drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
    }
    .logs-drawer-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* 日志抽屉样式 */
    .logs-drawer {
        position: fixed;
        top: 0;
        right: -75vw; /* 初始隐藏在右侧，宽度为视口的75% */
        width: 75vw; /* 占屏幕的3/4 */
        height: 100vh;
        background-color: #fff;
        box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        transition: right 0.3s ease;
        z-index: 1000;
        border-left: 1px solid #dee2e6;
    }
    .logs-drawer.open {
        right: 0; /* 显示时滑入 */
    }
    .logs-drawer-header {
        padding: 15px;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f9fa;
        flex-shrink: 0;
    }
    .logs-drawer-title {
        font-size: 1.1rem;
        font-weight: bold;
        margin: 0;
        color: #495057;
    }
    .logs-drawer-controls {
        display: flex;
        align-items: center;
    }
    .logs-drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        font-family: monospace;
        font-size: 0.9rem;
        background-color: #f8f9fa;
    }

    /* 日志过滤栏样式 */
    .logs-filter-bar {
        padding: 10px 15px;
        border-bottom: 1px solid #dee2e6;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .log-level-filters {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .filter-label {
        font-size: 0.9rem;
        color: #6c757d;
        font-weight: 500;
    }

    .form-check-label {
        font-size: 0.9rem;
        color: #495057;
    }

    /* 消息控制按钮样式 */
    .messages-controls {
        display: flex;
        align-items: center;
    }
    /* 日志项样式 */
    .log-item {
        margin-bottom: 5px;
        white-space: pre-wrap;
        word-break: break-all;
        padding: 2px 0;
        transition: opacity 0.2s ease;
    }

    .log-item.hidden {
        display: none;
    }

    .log-debug {
        color: #6c757d;
        opacity: 0.8;
    }

    .log-info {
        color: #0d6efd;
    }

    .log-warning {
        color: #ffc107;
        background-color: rgba(255, 193, 7, 0.1);
        padding: 2px 4px;
        border-radius: 3px;
    }

    .log-error {
        color: #dc3545;
        background-color: rgba(220, 53, 69, 0.1);
        padding: 2px 4px;
        border-radius: 3px;
        font-weight: 500;
    }
    .refresh-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }
    .empty-state {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        color: #6c757d;
    }
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    /* 纯CSS监听列表抽屉 - 使用checkbox hack */
    #listeners-drawer-toggle {
        display: none;
    }

    .listeners-drawer {
        position: fixed;
        top: 56px; /* 避开导航栏 */
        left: -75vw; /* 初始隐藏在左侧 */
        width: 75vw;
        height: calc(100vh - 56px); /* 减去导航栏高度 */
        background-color: #fff;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        transition: left 0.3s ease;
        z-index: 1000;
        border-right: 1px solid #dee2e6;
    }

    /* 当checkbox被选中时显示抽屉 */
    #listeners-drawer-toggle:checked ~ .listeners-drawer {
        left: 0;
    }

    /* 当checkbox被选中时显示遮罩 */
    #listeners-drawer-toggle:checked ~ .listeners-drawer-overlay {
        opacity: 1;
        visibility: visible;
    }
    .listeners-drawer-header {
        padding: 15px;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f9fa;
        flex-shrink: 0;
    }
    .listeners-drawer-title {
        font-size: 1.1rem;
        font-weight: bold;
        margin: 0;
        color: #495057;
    }
    .listeners-drawer-controls {
        display: flex;
        align-items: center;
    }
    .listeners-drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }

    /* 监听列表抽屉遮罩层 */
    .listeners-drawer-overlay {
        position: fixed;
        top: 56px; /* 避开导航栏 */
        left: 0;
        width: 100%;
        height: calc(100vh - 56px); /* 减去导航栏高度 */
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
        cursor: pointer;
    }

    /* 移动端响应式样式 */
    @media (max-width: 768px) {
        .split-view {
            flex-direction: column;
            gap: 10px;
            padding: 10px;
        }

        /* 隐藏原始监听面板，使用抽屉代替 */
        .listeners-panel {
            display: none;
        }

        /* 消息面板占满屏幕 */
        .messages-panel {
            width: 100%;
            min-height: calc(100vh - 56px - 20px);
            border-radius: 8px;
        }

        .messages-header {
            padding: 10px 15px;
        }

        .messages-title {
            font-size: 1.1rem;
        }

        .messages-controls .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
        }

        /* 监听列表抽屉在移动端占满宽度 */
        .listeners-drawer {
            width: 100%;
            left: -100%;
        }

        /* 移动端抽屉显示 */
        #listeners-drawer-toggle:checked ~ .listeners-drawer {
            left: 0;
        }

        /* 日志抽屉 - 从底部显示 */
        .logs-drawer {
            position: fixed !important;
            bottom: -60vh !important;
            left: 0 !important;
            width: 100% !important;
            height: 60vh !important;
            top: auto !important;
            right: auto !important;
            border-radius: 15px 15px 0 0 !important;
            z-index: 1050 !important;
            transition: bottom 0.3s ease !important;
        }

        .logs-drawer.open {
            bottom: 0 !important;
        }

        .logs-drawer-header {
            padding: 15px;
            border-bottom: 1px solid #dee2e6;
            background-color: #f8f9fa;
            border-radius: 15px 15px 0 0;
            position: relative;
        }

        .logs-drawer-header::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 4px;
            background-color: #dee2e6;
            border-radius: 2px;
        }

        .logs-drawer-title {
            font-size: 1rem;
            margin: 0;
        }

        /* 日志抽屉遮罩 */
        .logs-drawer-overlay {
            z-index: 1049 !important;
        }
    }

    @media (max-width: 480px) {
        .messages-container {
            height: calc(100vh - 56px);
        }

        .split-view {
            padding: 5px;
            gap: 5px;
        }

        .listeners-panel {
            max-height: 250px;
        }

        .listeners-panel.collapsed {
            max-height: 50px;
        }

        .listeners-header {
            padding: 10px;
        }

        .listeners-main-title {
            font-size: 1rem;
        }

        .listeners-subtitle {
            font-size: 0.75rem;
        }

        .messages-header {
            padding: 8px 10px;
        }

        .messages-title {
            font-size: 1rem;
        }

        .messages-controls .btn {
            padding: 0.2rem 0.4rem;
            font-size: 0.75rem;
        }

        .messages-controls .btn .fas {
            font-size: 0.8rem;
        }

        .toggle-text {
            display: none;
        }
    }
</style>
{% endblock %}

{% block content %}
<style>
    /* 覆盖base.html中的container-fluid样式 */
    .container-fluid.mt-3 {
        margin-top: 0 !important;
        padding: 0 !important;
        height: calc(100vh - 56px) !important; /* 减去导航栏高度 */
    }

    /* 隐藏footer */
    .footer {
        display: none !important;
    }

    /* 强制移除所有可能的底部空白 */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 确保没有额外的空白元素 */
    .messages-container::after,
    .split-view::after,
    .messages-panel::after,
    .messages-list::after {
        display: none !important;
    }

    /* 确保没有额外的margin和padding */
    .messages-container,
    .split-view,
    .messages-panel,
    .messages-list {
        margin: 0 !important;
    }
</style>

<div class="messages-container">
        <!-- 分栏视图：左侧监听对象列表，中间消息记录，右侧日志抽屉 -->
        <div class="split-view">
            <!-- 监听对象列表 -->
            <div class="listeners-panel">
                <div class="listeners-header">
                    <div class="listeners-title-section">
                        <h2 class="listeners-main-title">消息监控</h2>
                        <p class="listeners-subtitle">监控微信消息和系统日志</p>
                    </div>
                    <button id="refresh-listeners" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
                <div class="listeners-subheader">
                    <h5 class="listeners-list-title">监听对象列表</h5>
                </div>
                <div class="listeners-list" id="listeners-list">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">加载监听对象列表...</p>
                    </div>
                </div>
                <div class="listener-actions">
                    <button id="add-listener" class="btn btn-sm btn-primary w-100 mb-2">
                        <i class="fas fa-plus"></i> 添加监听对象
                    </button>
                    <button id="fixed-listeners" class="btn btn-sm btn-success w-100 mb-2" onclick="console.log('按钮被直接点击'); showFixedListenersModal();">
                        <i class="fas fa-thumbtack"></i> 固定监听
                    </button>
                    <button id="delete-listener" class="btn btn-sm btn-outline-danger w-100" disabled>
                        <i class="fas fa-trash-alt"></i> 删除监听对象
                    </button>
                </div>
            </div>

            <!-- 消息记录 -->
            <div class="messages-panel">
                <div class="messages-header">
                    <h5 class="messages-title">消息记录<span id="current-chat-name" class="text-muted ms-2"></span></h5>
                    <div class="messages-controls">
                        <label for="listeners-drawer-toggle" class="btn btn-sm btn-primary me-2 d-md-none" style="margin-bottom: 0;">
                            <i class="fas fa-users"></i>
                            <span class="toggle-text">监听</span>
                        </label>
                        <button id="refresh-messages" class="btn btn-sm btn-outline-primary me-2">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <button id="toggle-logs-drawer" class="btn btn-sm btn-info">
                            <i class="fas fa-list-alt"></i>
                            <span class="toggle-text">日志</span>
                        </button>
                    </div>
                </div>
                <div class="messages-list" id="messages-list">
                    <div class="empty-state">
                        <i class="fas fa-comments"></i>
                        <p>请选择一个监听对象查看消息</p>
                    </div>
                </div>
            </div>

            <!-- 纯CSS抽屉控制 -->
            <input type="checkbox" id="listeners-drawer-toggle" style="display: none;">

            <!-- 监听列表抽屉遮罩层 -->
            <label for="listeners-drawer-toggle" class="listeners-drawer-overlay"></label>

            <!-- 监听列表抽屉 - 从左侧滑出 -->
            <div class="listeners-drawer">
                <div class="listeners-drawer-header">
                    <h5 class="listeners-drawer-title">监听对象列表</h5>
                    <div class="listeners-drawer-controls">
                        <label for="listeners-drawer-toggle" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-times"></i>
                        </label>
                    </div>
                </div>
                <div class="listeners-drawer-content">
                    <!-- 监听对象列表内容 -->
                    <div class="listeners-header">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h6 class="listeners-main-title">监听对象</h6>
                                <small class="listeners-subtitle text-muted">选择要查看消息的对象</small>
                            </div>
                        </div>
                        <div class="listeners-subheader">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <small class="text-muted">共 <span id="listeners-count-drawer">0</span> 个监听对象</small>
                                <div class="listener-actions">
                                    <button id="refresh-listeners-drawer" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-sync-alt"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="listeners-list" id="listeners-list-drawer">
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2">加载监听对象...</p>
                        </div>
                    </div>

                    <!-- 监听对象操作组件 -->
                    <div class="listeners-drawer-footer" style="padding: 15px; border-top: 1px solid #dee2e6; background-color: #f8f9fa;">
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary btn-sm" onclick="showAddListenerModal()">
                                <i class="fas fa-plus"></i> 添加监听对象
                            </button>
                            <div class="btn-group" role="group">
                                <button class="btn btn-outline-secondary btn-sm" onclick="showEditListenerModal()" id="edit-listener-btn" disabled>
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-outline-danger btn-sm" onclick="showDeleteListenerModal()" id="delete-listener-btn" disabled>
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 日志抽屉遮罩层 -->
            <div class="logs-drawer-overlay" id="logs-drawer-overlay"></div>

            <!-- 消息监听日志抽屉 - 从右侧滑出 -->
            <div class="logs-drawer" id="logs-drawer">
                <div class="logs-drawer-header">
                    <h5 class="logs-drawer-title">消息监听日志</h5>
                    <div class="logs-drawer-controls">
                        <button id="refresh-logs" class="btn btn-sm btn-outline-primary me-2">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <button id="close-logs-drawer" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="logs-filter-bar">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="hide-debug-logs" checked>
                        <label class="form-check-label" for="hide-debug-logs">
                            屏蔽DEBUG日志
                        </label>
                    </div>
                    <div class="log-level-filters">
                        <span class="filter-label">显示级别:</span>
                        <div class="btn-group btn-group-sm" role="group">
                            <input type="checkbox" class="btn-check" id="show-info" checked>
                            <label class="btn btn-outline-info" for="show-info">INFO</label>

                            <input type="checkbox" class="btn-check" id="show-warning" checked>
                            <label class="btn btn-outline-warning" for="show-warning">WARN</label>

                            <input type="checkbox" class="btn-check" id="show-error" checked>
                            <label class="btn btn-outline-danger" for="show-error">ERROR</label>
                        </div>
                    </div>
                </div>
                <div class="logs-drawer-content" id="logs-list">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">加载日志...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加监听对象模态框 -->
<div class="modal fade" id="listenerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加监听对象</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="listenerForm">
                    <div class="mb-3">
                        <label for="listener-instance" class="form-label">实例</label>
                        <select class="form-select" id="listener-instance" required>
                            <option value="">请选择实例</option>
                            <!-- 实例选项将动态加载 -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="listener-chat" class="form-label">聊天对象</label>
                        <input type="text" class="form-control" id="listener-chat" required>
                        <div class="form-text">输入聊天对象的名称，例如：群聊名称、好友昵称等</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-listener">添加</button>
            </div>
        </div>
    </div>
</div>

<!-- 固定监听配置模态框 -->
<div class="modal fade" id="fixedListenersModal" tabindex="-1" aria-labelledby="fixedListenersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fixedListenersModalLabel">固定监听配置</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- 左侧：固定监听列表 -->
                    <div class="col-md-6">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">固定监听列表</h6>
                            <button type="button" class="btn btn-sm btn-primary" id="add-fixed-listener">
                                <i class="fas fa-plus"></i> 添加
                            </button>
                        </div>
                        <div class="list-group" id="fixed-listeners-list" style="max-height: 300px; overflow-y: auto;">
                            <div class="text-center py-3">
                                <div class="spinner-border spinner-border-sm text-primary" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                                <p class="mt-2 mb-0 text-muted">加载固定监听配置...</p>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧：详情编辑 -->
                    <div class="col-md-6">
                        <h6 class="mb-3">详情编辑</h6>
                        <form id="fixed-listener-form">
                            <div class="mb-3">
                                <label for="fixed-session-name" class="form-label">会话名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="fixed-session-name" placeholder="请输入会话名称" required>
                                <div class="invalid-feedback">
                                    会话名称不能为空
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="fixed-enabled" checked>
                                    <label class="form-check-label" for="fixed-enabled">
                                        启用此固定监听
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="fixed-description" class="form-label">描述</label>
                                <textarea class="form-control" id="fixed-description" rows="3" placeholder="可选：输入描述信息"></textarea>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="button" class="btn btn-success" id="save-fixed-listener" disabled>
                                    <i class="fas fa-save"></i> 保存更改
                                </button>
                                <button type="button" class="btn btn-outline-danger" id="delete-fixed-listener" disabled>
                                    <i class="fas fa-trash-alt"></i> 删除配置
                                </button>
                            </div>
                        </form>

                        <!-- 说明信息 -->
                        <div class="alert alert-info mt-3" role="alert">
                            <small>
                                <i class="fas fa-info-circle"></i>
                                固定监听的会话将在服务启动时自动添加到所有实例的监听列表中，且不受超时机制影响。
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', path='/js/pages/messages.js') }}?v={{ timestamp }}"></script>
<script>
// 简单的抽屉数据加载脚本
document.addEventListener('DOMContentLoaded', function() {
    console.log('加载抽屉数据脚本');

    // 监听抽屉打开事件
    const drawerToggle = document.getElementById('listeners-drawer-toggle');
    if (drawerToggle) {
        drawerToggle.addEventListener('change', function() {
            if (this.checked) {
                console.log('抽屉打开，加载数据');
                loadDrawerListeners();
            }
        });
    }

    // 刷新按钮事件
    const refreshBtn = document.getElementById('refresh-listeners-drawer');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', function() {
            console.log('刷新抽屉数据');
            loadDrawerListeners();
        });
    }
});

function loadDrawerListeners() {
    const listContainer = document.getElementById('listeners-list-drawer');
    const countElement = document.getElementById('listeners-count-drawer');

    if (!listContainer) return;

    // 显示加载状态
    listContainer.innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-2">加载监听对象...</p>
        </div>
    `;

    // 获取监听对象数据
    fetch('/api/listeners')
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            return response.json();
        })
        .then(listeners => {
            console.log('抽屉监听对象数据:', listeners);
            // API直接返回listeners数组
            if (Array.isArray(listeners)) {
                renderDrawerListeners(listeners);
                if (countElement) {
                    countElement.textContent = listeners.length;
                }
            } else {
                throw new Error('返回数据格式错误');
            }
        })
        .catch(error => {
            console.error('加载监听对象失败:', error);
            listContainer.innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-exclamation-triangle text-warning" style="font-size: 2rem;"></i>
                    <p class="mt-2 text-muted">加载失败: ${error.message}</p>
                    <button class="btn btn-sm btn-outline-primary" onclick="loadDrawerListeners()">
                        <i class="fas fa-redo"></i> 重试
                    </button>
                </div>
            `;
        });
}

function renderDrawerListeners(listeners) {
    const listContainer = document.getElementById('listeners-list-drawer');

    if (!listeners || listeners.length === 0) {
        listContainer.innerHTML = `
            <div class="text-center py-5">
                <i class="fas fa-users text-muted" style="font-size: 2rem;"></i>
                <p class="mt-2 text-muted">暂无监听对象</p>
            </div>
        `;
        updateDrawerActionButtons(false);
        return;
    }

    const html = listeners.map(listener => {
        // 使用数据库中的字段名
        const listenerId = `${listener.instance_id}_${listener.who || listener.chat_name}`;
        const listenerName = listener.who || listener.chat_name || '未知';
        const isActive = listener.status === 'active';
        const instanceId = listener.instance_id || '未知实例';

        console.log('生成抽屉监听对象:', {
            listener,
            listenerId,
            listenerName,
            instanceId,
            who: listener.who,
            chat_name: listener.chat_name
        });

        return `
        <div class="listener-item drawer-listener-item ${listenerId === window.currentListenerId ? 'active' : ''}"
             data-listener-id="${escapeHtml(listenerId)}"
             data-instance-id="${escapeHtml(listener.instance_id)}"
             data-who="${escapeHtml(listener.who || listener.chat_name)}"
             data-chat-name="${escapeHtml(listener.chat_name || '')}"
             data-who-field="${escapeHtml(listener.who || '')}"
             style="cursor: pointer;">
            <div class="listener-info">
                <div class="listener-name">${escapeHtml(listenerName)}</div>
                <div class="listener-details">
                    <small class="text-muted">
                        实例: ${escapeHtml(instanceId)}
                        ${listener.manual_added ? ' • 手动添加' : ''}
                    </small>
                </div>
            </div>
            <div class="listener-status">
                <span class="badge ${isActive ? 'bg-success' : 'bg-secondary'}">
                    ${isActive ? '活跃' : '离线'}
                </span>
            </div>
        </div>
        `;
    }).join('');

    listContainer.innerHTML = html;

    // 添加点击事件监听器
    const listenerItems = listContainer.querySelectorAll('.listener-item');
    listenerItems.forEach(item => {
        item.addEventListener('click', function() {
            const listenerId = this.getAttribute('data-listener-id');
            const instanceId = this.getAttribute('data-instance-id');
            const who = this.getAttribute('data-who');

            console.log('抽屉监听对象被点击:', {
                listenerId,
                instanceId,
                who,
                element: this
            });

            // 移除其他项的active类
            listenerItems.forEach(i => i.classList.remove('active'));
            // 添加当前项的active类
            this.classList.add('active');
            // 启用操作按钮
            updateDrawerActionButtons(true);

            // 调用选择函数，传递正确的参数
            selectDrawerListenerWithData(instanceId, who);
        });
    });

    // 如果有选中的监听对象，启用按钮
    const hasActive = listeners.some(l => {
        const listenerId = `${l.instance_id}_${l.who || l.chat_name}`;
        return listenerId === window.currentListenerId;
    });
    updateDrawerActionButtons(hasActive);
}

function selectDrawerListenerWithData(instanceId, who) {
    console.log('=== 从抽屉选择监听对象（使用数据属性）===');
    console.log('传入的参数:', { instanceId, who });

    // 关闭抽屉
    const drawerToggle = document.getElementById('listeners-drawer-toggle');
    if (drawerToggle) {
        drawerToggle.checked = false;
    }

    console.log('即将切换到会话:', who);

        // 直接调用主页面的loadMessages函数来切换会话
        if (typeof loadMessages === 'function') {
            console.log('调用loadMessages切换会话');

            // 先更新全局变量，确保currentListener在loadMessages调用前就设置好
            if (typeof currentListener !== 'undefined') {
                window.currentListener = {
                    instance_id: instanceId,
                    chat_name: who
                };
                console.log('已更新currentListener:', window.currentListener);
            }

            // 更新消息标题中的会话名称
            updateChatNameDisplay(who);

            // 更新主页面的监听对象列表选中状态
            updateMainListenerSelection(instanceId, who);

            // 最后调用loadMessages
            loadMessages(instanceId, who, true);

        } else {
            console.error('loadMessages函数不存在');
            alert('切换会话功能暂不可用');
        }
}

// 更新会话名称显示
function updateChatNameDisplay(chatName) {
    const chatNameElement = document.getElementById('current-chat-name');
    if (chatNameElement && chatName) {
        chatNameElement.textContent = `（${chatName}）`;
    }
}

// 更新主页面监听对象列表的选中状态
function updateMainListenerSelection(instanceId, who) {
    // 查找并选中对应的监听对象项
    const listenerItems = document.querySelectorAll('#listeners-list .listener-item');
    listenerItems.forEach(item => {
        item.classList.remove('active');

        // 检查是否匹配当前选择的监听对象
        const itemInstanceId = item.querySelector('.listener-instance')?.textContent?.trim();
        const itemChatName = item.querySelector('.listener-name')?.textContent?.trim();

        if (itemInstanceId === instanceId && itemChatName === who) {
            item.classList.add('active');
            console.log('已更新主页面监听对象选中状态:', { instanceId, who });
        }
    });

    // 启用删除按钮
    const deleteButton = document.getElementById('delete-listener');
    if (deleteButton) {
        deleteButton.disabled = false;
    }
}

function updateDrawerActionButtons(hasSelection) {
    const editBtn = document.getElementById('edit-listener-btn');
    const deleteBtn = document.getElementById('delete-listener-btn');

    if (editBtn) editBtn.disabled = !hasSelection;
    if (deleteBtn) deleteBtn.disabled = !hasSelection;
}

function showAddListenerModal() {
    console.log('显示添加监听对象模态框');
    // 如果主页面的函数存在，调用它
    if (typeof showListenerModal === 'function') {
        showListenerModal();
    } else {
        alert('添加监听对象功能暂未实现');
    }
}

function showEditListenerModal() {
    console.log('显示编辑监听对象模态框');
    const activeItem = document.querySelector('#listeners-list-drawer .listener-item.active');
    if (activeItem) {
        const listenerId = activeItem.dataset.listenerId;
        const instanceId = activeItem.dataset.instanceId;
        const who = activeItem.dataset.who;

        console.log('编辑监听对象:', { listenerId, instanceId, who });

        // 如果主页面的函数存在，调用它
        if (typeof showListenerModal === 'function') {
            // 尝试传递更详细的信息
            showListenerModal({ instanceId, who, listenerId });
        } else {
            alert('编辑监听对象功能暂未实现');
        }
    }
}

function showDeleteListenerModal() {
    console.log('显示删除监听对象确认框');
    const activeItem = document.querySelector('#listeners-list-drawer .listener-item.active');
    if (activeItem) {
        const listenerId = activeItem.dataset.listenerId;
        const instanceId = activeItem.dataset.instanceId;
        const who = activeItem.dataset.who;
        const listenerName = activeItem.querySelector('.listener-name').textContent;

        if (confirm(`确定要删除监听对象"${listenerName}"吗？`)) {
            console.log('删除监听对象:', { listenerId, instanceId, who });

            // 调用删除API
            deleteListener(instanceId, who, listenerName);
        }
    }
}

function deleteListener(instanceId, who, listenerName) {
    // 显示加载状态
    const activeItem = document.querySelector('#listeners-list-drawer .listener-item.active');
    if (activeItem) {
        activeItem.style.opacity = '0.5';
        activeItem.style.pointerEvents = 'none';
    }

    // 调用删除API
    fetch('/api/listeners', {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            instance_id: instanceId,
            chat_name: who
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('删除监听对象成功:', data);
        alert(`监听对象"${listenerName}"删除成功`);

        // 重新加载监听对象列表
        loadDrawerListeners();
    })
    .catch(error => {
        console.error('删除监听对象失败:', error);
        alert(`删除监听对象失败: ${error.message}`);

        // 恢复UI状态
        if (activeItem) {
            activeItem.style.opacity = '';
            activeItem.style.pointerEvents = '';
        }
    });
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>
{% endblock %}
